<template>
  <div>
    <!-- 用户数据 -->
    <el-card class="box-card">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-row>
          <el-col :span="18" :xs="24">
            <el-form-item>
              <el-button type="success" :icon="Plus" @click="handleAdd"
                >新增</el-button
              >
              <el-button
                type="danger"
                :icon="Delete"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPerm="['sys:user:delete']"
                >删除</el-button
              >
            </el-form-item>

            <el-form-item prop="keywords">
              <el-input
                v-model="queryParams.id"
                placeholder="站点id"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>

            <el-form-item prop="status">
              <el-select
                v-model="queryParams.siteType"
                placeholder="站点类型"
                clearable
                style="width: 200px"
              >
                <el-option label="正常" value="1" />
                <el-option label="禁用" value="0" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleQuery"
                >搜索</el-button
              >
              <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>

          <el-col :span="6" :xs="24" style="text-align: right">
            <el-form-item>
              <el-button :icon="Download" style="margin-left: 12px"
                >新建站点</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table :data="list" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column key="id" label="用户编号" align="center" prop="id" />
        <el-table-column key="name" label="用户名" align="center" prop="name" />
        <el-table-column label="站点类型" align="center" prop="type" />
        <el-table-column label="影片数量" align="center" prop="filmNumber" />
        <el-table-column label="图集数量" align="center" prop="imgNumber" />
        <el-table-column label="文章数量" align="center" prop="articleNumber" />
        <el-table-column label="采集中任务" align="center" prop="taskNumber" />
        <el-table-column label="创建人" align="center" prop="creator" />
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="状态" align="center" prop="status">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              :inactive-value="0"
              :active-value="1"
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
              @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template #default="scope">
            <el-button
              type="primary"
              :icon="Edit"
              circle
              plain
              @click="handleUpdate(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              :icon="Delete"
              circle
              plain
              @click="handleDelete(scope.row)"
            ></el-button>
            <el-button
              type="warning"
              :icon="Lock"
              circle
              plain
              @click="resetPassword(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>
<script setup lang="ts">
// Vue依赖
import { reactive, ref, onMounted, toRefs } from 'vue';
import {
  Search,
  Plus,
  Edit,
  Refresh,
  Delete,
  Lock,
  Download,
  Top
} from '@element-plus/icons-vue';
// 组件依赖
import { ElForm, ElMessageBox, ElMessage } from 'element-plus';
import { SiteItem, SiteQueryParam, Option } from '@/types/api/site/site';
interface siteData {
  list: SiteItem[];
}
const emit = defineEmits(['getLIst']);
const props = defineProps<siteData>();
const { list } = toRefs(props);
// DOM元素的引用声明定义 ，变量名和DOM的ref属性值一致
const queryFormRef = ref(ElForm); // 查询表单
const state = reactive({
  // 遮罩层
  loading: true,
  // 选中数组
  ids: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 总条数
  total: 0,
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10
  } as SiteQueryParam
});
const { loading, multiple, queryParams, total } = toRefs(state);
const handleQuery = () => {
  emit('getLIst');
};
const handleAdd = () => {};
const handleDelete = () => {};
/**
 * 重置查询
 */
const resetQuery = () => {
  queryFormRef.value.resetFields();
  emit('getLIst');
};
/**
 * 表格行选中事件
 */
const handleSelectionChange = (selection: any) => {
  state.ids = selection.map((item: any) => item.id);
  state.single = selection.length !== 1;
  state.multiple = !selection.length;
};
/**
 * 站点状态修改
 */
const handleStatusChange = (row: { [key: string]: any }) => {
  const text = row.status === 1 ? '启用' : '停用';
  ElMessageBox.confirm(
    '确认要' + text + '' + row.username + '用户吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      //   return updateUserPart(row.id, { status: row.status });
    })
    .then(() => {
      ElMessage.success(text + '成功');
    })
    .catch(() => {
      row.status = row.status === 1 ? 0 : 1;
    });
};
</script>
<style lang="scss" scoped></style>
